import React, {PureComponent} from 'react';
import {
  Row,
  Col,
  Card,
  Form,
  Input,
  Select,
  Icon,
  Button,
  Dropdown,
  Menu,
  InputNumber,
  DatePicker,
  Modal,
  message,
  Badge,
  Divider,
  Table,
  Alert,
} from 'antd';
import styles from './OrderList.less';
import G from '../../utils/g';

const columns = [
  {
    title: '商家',
    dataIndex: 'goods_nickname',
    key: 'goods_nickname'
  },
  {
    title: '商品',
    dataIndex: 'name',
    key: 'name'
  },
  {
    title: '型号',
    dataIndex: 'sku',
    key: 'sku',
    // render(text, record) {
    //   let result = '';
    //   const sku = JSON.parse(record.sku);
    //   for (let key in sku) {
    //     result += key + ':' + record.sku[key];
    //   }
    //   console.log(result);
    //   return result;
    // },
  },
  {
    title: '单价',
    dataIndex: 'price',
    key: 'price'
  },
  {
    title: '数量',
    dataIndex: 'total_count',
    key: 'total_count'
  },
  {
    title: '利润',
    dataIndex: 'profit_subtotal',
    key: 'profit_subtotal'
  },
  {
    title: '利润率',
    dataIndex: 'profit_margin',
    key: 'profit_margin'
  },
  {
    title: '销售额',
    dataIndex: 'sale_total',
    key: 'sale_total'
  },
  {
    title: '结算价',
    dataIndex: 'settlement_price',
    key: 'settlement_price'
  },
  {
    title: '结算小计',
    dataIndex: 'settlement_total',
    key: 'settlement_total'
  },
];
export default class SkuList extends PureComponent {

  render() {
    const {data=[], loading, month=''} = this.props;
    
    let [totalCount, totalSettlement] = [0,0];

    data.forEach(({settlement_total, total_count })=>{
      totalCount += Number(total_count);
      totalSettlement += Number(settlement_total);
    });

    return (
      <div>
        <Card bordered={false} style={{marginTop:16}}>
          <div className={styles.tableList}>
            <div className={styles.tableListOperator}>
              <h3>待结算月份：{month}</h3>
            </div>
            <Alert
              style={{ marginBottom: 16 }}
              message={`SKU种类：${data.length}，商品数量：${totalCount}，结算小计：${totalSettlement}`}
              type="info"
              showIcon
            />
            <Table rowKey={(record)=>`${record.month_flag}${record.skuId}`} dataSource={data} columns={columns} pagination={false}  loading={loading}/>
          </div>
        </Card>
      </div>
    );
  }
}
